<template>
	<view class="">
		<view class="" style="padding-top: 20rpx;">
			<view class="item" :class="{on:findex==index}" v-for="(item,index) in list" :key="index"
				@click="change(index,item)">
				<view class="top u-flex u-col-center">
					<block v-if="types == 'release' || types == 'release2'">
						<image src="../../static/c2.png" mode="aspectFill" v-if="findex==index"></image>
						<image src="../../static/c1.png" mode="aspectFill" v-else>
						</image>
					</block>
					<text>{{item.gameZoneName}}</text>
				</view>
				<view class="i u-flex u-col-center u-row-between">
					<view class="l">
						角色ID
					</view>
					<view class="r">
						{{item.account}}
					</view>
				</view>
				<view class="i u-flex u-col-center u-row-between">
					<view class="l">
						微信号/手机号
					</view>
					<view class="r">
						{{item.wechat}}
					</view>
				</view>
				<view class="footer u-flex u-col-center u-row-between">
					<view class="l u-flex u-col-center u-row-left" @click.stop="setDefault(item)">
						<image src="../../static/c4.png" mode="aspectFill" v-if="item.isDefault==1"></image>
						<image src="../../static/c3.png" mode="aspectFill" v-else></image>

						<text :style="{color:item.isDefault==1?'#FF6F07':''}">{{item.isDefault==1?"已默认":"设为默认"}}</text>
					</view>
					<view class="r u-flex u-col-center u-row-right">
						<view class="btn" @click.stop="open(item.id)">
							删除
						</view>
						<view class="btn" @click.stop="pageTo(`/pages/user/address?type=edit&id=${item.id}`,item)">
							修改
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="nolist" v-if="nolist">
			<image src="/static/kong4.png" mode="aspectFill"></image>
			<text>暂无信息</text>
		</view>
		<view class="" style="height: 200rpx;"></view>
		<view class="footer_btn">
			<view class="cont">
				<view class="btn" @click="$pageTo(`/pages/user/address?type=add`)">
					新增信息
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		accountList,
		delAccountList,
		userSaccountEdit
	} from '@/common/http.api.js';
	export default {
		data() {
			return {
				show: false,
				id: "",
				findex: -1,
				types: '',
				sid: '',
				status_up: '',
				status: '',
				upday: "",
				from: '',
				type: "",
				name: "",
				price: '',
				image: "",


				list: [],
				nolist: false,
				params: {
					page: 1,
				}
			}
		},
		onLoad(o) {
			this.types = o.types
			this.from = o.from
			if (this.types == 'release2') {
				this.sid = o.id
				this.status_up = o.status_up
				this.status = o.status
				if (this.status_up == 3 && this.status == 3) {
					this.upday = o.upday
				}
				this.type = o.type
				this.name = o.name
				this.price = o.price
				this.image = o.image
			}
			if (this.types == 'user') {
				uni.setNavigationBarTitle({
					title: '账号管理'
				})
			}
		},
		onShow() {
			this.list = []
			this.params.page = 1
			this.getlist()
		},
		onReachBottom() {
			console.log('13');
		},
		methods: {
			getlist() {
				accountList(this.params).then(res => {
					if (res.code == 200) {
						this.list.push(...res.data.list)
						this.nolist = this.list.length == 0
						if (this.types == 'release' && uni.getStorageSync('addressData')) {
							let id = uni.getStorageSync('addressData').id
							this.findex = this.list.findIndex(item => item.id == id)
						}
					}
				})
			},
			pageTo(url, data) {
				uni.setStorageSync('editAddressData', data);
				uni.navigateTo({
					url: url
				})
			},
			setDefault(data) {
				if (data.isDefault == 0) {
					data.is_default = 1
					data.game_zone_name = data.gameZoneName
					userSaccountEdit(data).then(res => {
						if (res.code == 200) {
							this.$modal.msg('修改成功')
							this.list = []
							this.params.page = 1
							this.getlist()
						}
					})
				}
			},
			open(id) {
				this.$modal.confirm('是否要删除当前数据？', '删除提示').then(() => {
						return delAccountList(id)
					}).then(() => {
						this.$modal.msgSuccess('删除成功')
						this.list = []
						this.params.page = 1
						this.getlist()
					})
					.catch(() => {})
			},
			change(index, item) {
				if (this.types == 'release' || this.types == 'release2') {
					this.findex = index
					uni.setStorageSync('addressData', item)
					if (this.types == 'release') {
						uni.navigateBack()
					}
					if (this.types == 'release2') {
						uni.navigateTo({
							url: `/pages/index/edit2?id=${this.sid}&status=${this.status}&status_up=${this.status_up}&upday=${this.upday}&type=${this.type}&price=${this.price}&name=${this.name}&image=${this.image}&from=${this.from}`
						})
					}
				}
			},

		}
	}
</script>

<style lang="scss" scoped>
	.item {
		width: 690rpx;
		margin: 0rpx auto 20rpx;
		padding: 20rpx;
		border-radius: 20rpx;
		background-color: #fff;
		box-sizing: border-box;
		border: 1px solid #fff;

		.footer {
			margin-top: 10rpx;

			.l {
				image {
					width: 40rpx;
					height: 40rpx;


				}

				text {
					font-size: 24rpx;
					color: #979797;
					margin-left: 20rpx;
				}
			}

			.r {
				.btn {
					width: 82rpx;
					height: 48rpx;
					line-height: 48rpx;
					text-align: center;
					background: #F5F5F5;
					border-radius: 8rpx;
					margin-left: 20rpx;
					font-size: 24rpx;
					color: #979797;
				}
			}
		}

		.i {
			height: 60rpx;
			line-height: 60rpx;

			.l {
				color: #979797;
				font-size: 28rpx;
			}

			.r {
				flex: 1;
				width: 1rpx;
				margin-left: 20rpx;
				color: #11192D;
				font-size: 28rpx;
				text-align: right;
			}
		}

		.top {
			height: 40rpx;
			line-height: 40rpx;
			margin-bottom: 20rpx;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 20rpx;
			}

			text {
				font-size: 32rpx;
				color: #11192D;
			}
		}
	}

	.on {
		border: 2rpx solid #FF6F07;
	}

	.nolist {
		padding: 200rpx 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		image {
			width: 360rpx;
			height: 236rpx;
		}
		text {
			font-size: 24rpx;
			color: #999;
			margin-top: 20rpx;
		}
	}

	.m-pop2 {
		width: 620rpx;
		height: 400rpx;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		flex-direction: column;
		box-sizing: border-box;
		padding: 60rpx 40rpx 20rpx;

		.t {
			line-height: 44rpx;
			height: 44rpx;
			font-size: 40rpx;
			color: #000000;
			text-align: center;
			font-weight: 600;
		}

		.p {
			margin-top: 60rpx;
			line-height: 44rpx;
			height: 44rpx;
			font-size: 32rpx;
			color: #000000;
			text-align: center;
		}

		.btns {
			width: 100%;
			margin-top: 50rpx;

			.btn {
				text-align: center;
				font-size: 32rpx;
				width: calc(50% - 10rpx);
				height: 90rpx;
				line-height: 90rpx;
				border-radius: 20rpx;
			}

			.btn1 {

				background: #F9F9F9;
				color: #D1CDCD;
			}

			.btn2 {
				color: #fff;
				background: linear-gradient(270deg, #FF6F07 0%, #FFA666 100%);

			}
		}
	}


	.f-btn {
		position: fixed;
		left: 30rpx;
		right: 30rpx;
		bottom: 30rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 32rpx;
		color: #fff;
		font-weight: 600;
		height: 100rpx;
		background: linear-gradient(270deg, #FF6F07 0%, #FFA666 100%);
		border-radius: 20rpx;
	}
</style>